
<template>
	<view class="content">
		
		<!-- <view class="login_img"><image mode="aspectFill" src="/static/image/iamhe.png"></image></view> -->
		<view class="login_from">
			<view class="login_from_input">
				<view class="login_from_name">手机号</view>
				<view class="login_from_fun"><input type="text" v-model="UserVo.phone" placeholder="请输入手机号码"></view>
			</view>
			<view class="login_from_input">
				<view class="login_from_name">验证码</view>
				<view class="login_from_fun">
					<input style="width: 40%; text-align: left" v-model="UserVo.phoneCode" type="digit" maxlength="6" placeholder="验证码">
					<text class="getyzm" v-if="yzmbotshou"  @click="getyzm">获取验证码</text>
					<text class="getyzm" style="color: #888;" v-if="yzmbothide">{{times}}秒后重新获取</text>
				</view>
			</view>	
			<view class="login_from_input">
				<view class="login_from_name">密码</view>
				<view class="login_from_fun"><input type="digit" v-model="UserVo.password" password="true" placeholder="请输入登录密码"></view>
			</view>
			
			<view class="login_from_input">
				<view class="login_from_name">请重新输入密码</view>
				<view class="login_from_fun"><input type="digit" v-model="UserVo.checkPassword" password="true" placeholder="请输入登录密码"></view>
			</view>
			<view class="login_from_dl">
				<button @click="denglu">重置密码</button>
			</view>	
		</view>
		
	</view>
</template>
<script>
   export default {

   data(){
     return {
		gouxSta:false,
		times:60,
		yzmbotshou:true,
		yzmbothide:false,
		UserVo:{
			phone:'',
			phoneCode:'',
			password:'',
			checkPassword:''
		}
		
	}
	   },
    onLoad(){
     },
    methods: {
		
		moutcl(){
			if( this.gouxSta == false){
				this.gouxSta = true
			}else{
				this.gouxSta = false
			}
		},
		
		denglu(){
			console.log(this.UserVo)	
			uni.request({
			    url: `http://localhost:7000/user/forgeTPassword`, //接口地址。
			    data: this.UserVo,
			    header: {
			        'custom-header': 'hello' //自定义请求头信息
			    },
				method:'POST',
			    success: (res) => {
			        console.log(res.data);
					if(res.data.flag){
						uni.showToast({
							title: '重置密码成功，即将跳往登录界面',
							icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
							duration: 2000    //持续时间为 2秒
						}) 
						uni.navigateTo({
							url:'../login/index'
						})
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
							duration: 2000    //持续时间为 2秒
						})  
					}
			    }
			});	
		},
		getyzm(){
				uni.request({
				    url: `http://localhost:7000/user/authcode/${this.UserVo.phone}`, //接口地址。
				    data: {},
				    header: {
				        'custom-header': 'hello' //自定义请求头信息
				    },
					method:'POST',
				    success: (res) => {
				        console.log(res.data);
						if(res.data.flag){
							var num = 60;
							this.yzmbotshou = false,
							this.yzmbothide = true
							var interval = setInterval(() =>{
								 if(this.is_sendsms == false){this.sendsms()}
								--this.times
							},1000)
							setTimeout(()=>{
								clearInterval(interval)
								this.yzmbotshou = true,
								this.yzmbothide = false,
								this.times = num
							},60000)
						}
				    }
				});			
		},
		
		handleTap(picker) {
			this.$refs[picker].show()
		},
		handleChange(e) {
			console.log('change::', e)
		},
		handleConfirm(e) {
			// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
			console.log('confirm::', e)
			if (e) {
				const name = e.dataset.name
				const label = e.item.map(m => m.label).join('-')
				if (name && label) {
					this[name] = label
				}
			}
		},
		handleCancel(e) {
			console.log('cancel::', e)
		}	
		
		
		
     }
 }
</script>
<style>
	
	page{ background: #fff; }
	
	.login_img{ width: 100%; height: auto; margin-top: 90upx; }
	.login_img image{ width: 170upx; height: 170upx; display: block; margin: 0px auto; border-radius: 50%; }
	
	.login_from{ width: 100%; height: auto; box-sizing: border-box; padding: 20upx 8%; }
	
	.login_from_input{ width: 100%; height:auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px #eee solid; padding: 40upx 0px; margin: 0px auto;  } 
	
	.login_from_name{ width: 20%; }
	.login_from_fun{ width: 80%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;  }
	.login_from_fun input{ width: 100%; text-align: left; font-size: 14px;  }
	
	
	.login_from_dl{ width: 100%; height: 50px; line-height: 50px; margin-top: 150upx;   }
	.login_from_dl button{ width: 100%; height: 50px; line-height: 50px; background: #FF3B00; color: #fff; border-radius: 50px; }
	
	.logo_xieyi{ width: 100%; height: 40px; line-height: 40px; display: flex; flex-direction: row; margin-top: 30upx; align-items: center; color: #444; font-size: 14px; justify-content: center; }
	.logo_xieyi label{ font-size: 18px; margin-right: 1%; }
	
	.cuIcon-squarecheckfill{ color: #FF3B00; }
	.logo_text text{ color: #FF3B00; }
	
	.getyzm{ width: 60%; display: flex; flex-direction: row; justify-content: flex-end; color: #FF3B00; }
	.cuicon{ font-size: 18px; }  
	
</style>


